<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="http://apps.bdimg.com/libs/jquery/1.3.2/jquery.min.js"></script>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		.container{
			width: 200px;
			height: 40px;
			margin: 50px auto;
			position: relative;
		}
		.container::after{
			width: 0;
			height: 0;
			position: absolute;
			content: "";
			border-width: 8px;
			border-style: solid;
			border-color: #ddd transparent transparent transparent;
			top: 16px;
			right: 5px;
		}
		input{
			width: 100%;
			height: 40px;
			outline: none;
			border: 1px solid #ddd;
			border-radius: 4px;
			padding: 0 25px 0 20px;
			cursor: pointer;
		}
		input::-ms-clear, input::-ms-reveal{
			/* width : 0;
			height: 0; */
			display:none;
		}
		input:focus{
			border: 1px solid blue;
			box-shadow: 0 0 2px #0000FF;
		}
		.select{
			width: 100%;
			position: absolute;
			top: 42px;
			left: 0;
			z-index: 0;
			max-height: 200px;
			overflow-y: auto;
			box-shadow: 0 0 2px rgba(0,0,0,.1);
			border: 1px solid #e4e7ed;
			border-radius: 4px;
			margin-top: 5px;
			display: none;
		}
		.select>ul{
			margin: 0;
			padding: 5px 0;
		}
		.select>ul>li{
			list-style: none;
			height: 30px;
			padding: 0 15px;
			cursor: pointer;
			line-height: 30px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.select>ul>li:hover{
			background-color: #f5f7fa;
		}
		.select>ul>li.selected{
			color: #0000FF;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div class="container">
		<input type="text" id="input" placeholder="请输入" />
		<div class="select">
			<ul></ul>
		</div>
	</div>
	<script type="text/javascript">
		function getValue (e){
			var event = e || window.event
			if (event.target) {
				$("#input").val($(event.target).text())
			} else {
				$("#input").val($(event.srcElement).text())
			}
			filterLi('')
			$(".select").css({
				"display": "none"
			})
		}
		var data = [
			{ name: '张三', value: '张三张三张三张三张三张三张三张三张三张三' },
			{ name: '李四', value: '李四' },
			{ name: '啊啊啊', value: '啊啊啊' },
			{ name: 'bbb', value: 'bbb' },
			{ name: 'ccc', value: 'ccc' },
			{ name: 'ddd', value: 'ddd' },
			{ name: 'eee', value: 'eee' },
			{ name: 'fff', value: 'fff' },
			{ name: 'ggg', value: 'ggg' },
			{ name: 'mmm', value: 'mmm' },
		]
		for (var i=0;i<data.length;i++){
			$(".select>ul").append('<li onclick="getValue()">' + data[i].value + '</li>')
		}
		$("#input").bind('keyup', function(e){
			filterLi(e.target.value)
		})
			
		function filterLi(value){
			$('.select>ul').empty()
			var d = data.filter(function(item){
				return new RegExp(value, 'g').test(item.value)
			})
			if (d.length === 0){
				$('.select>ul').append('<li style="justify-content: center;">暂无匹配数据</li>')
			}else {
				d.forEach(function(item) {
					if ($("#input").val() === item.value) {
						$('.select>ul').append('<li class="selected" onclick="getValue()">' + item.value + '</li>')
					}else{
						$('.select>ul').append('<li onclick="getValue()">' + item.value + '</li>')
					}
				})
			}
		}
		
		$("#input").focus(function(){
			$(".select").css({
				"display": "block"
			})
		})
		$(document).click(function(e) {
			var e = e || window.event;
			if ($(e.target).attr("id") !== 'input') {
				$(".select").css({
					"display": "none"
				})
			}
		})
	</script>
</body>
</html>